<template>
	<view class="wrap">
		<u-form style="background: #fff;padding-left: 30rpx" :model="model" :rules="rules" ref="uForm" :errorType="errorType">
			<u-form-item label="身份证号" label-width="200" prop="idNumber">
				<u-input placeholder="请输入身份证号" v-model="model.idNumber" type="text"></u-input>
			</u-form-item>
			<u-form-item label="开户行" label-width="200" prop="accountType">
				<u-input placeholder="请输入开户行" v-model="model.accountType" type="text"></u-input>
			</u-form-item>
			<u-form-item label="开户人名" label-width="200" prop="accountName">
				<u-input type="text" v-model="model.accountName" placeholder="请输入开户人名"></u-input>
			</u-form-item>
			<u-form-item label="银行卡号" label-width="200" prop="cardNumber">
				<u-input type="text" v-model="model.cardNumber" placeholder="请输入银行卡号"></u-input>
			</u-form-item>
		</u-form>
		<view class="note">
			<text>温馨提示：为保证顺利提现，建议绑定四大银行的银行卡。</text>
			<view class="">银行信息只能修改一次，请谨慎修改提交。</view>
		</view>
		<view style="margin-top: 60rpx;">
			<u-button @click="submit" style="background-color: #fec762" :plain="false" :ripple="true" type="primary">提交</u-button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		let that = this;
		return {
			model: {
				idNumber:'',
				accountType: '',
				accountName: '',
				cardNumber:""
			},
			rules: {
				idNumber:[
					{
						required: true,
						message: '请输入身份证号',
						trigger: ['change','blur'],
					},
					{
						pattern:/(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{7}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}$)/,
						message: '身份证号格式不对',
						trigger: ['change','blur'],
					}
				],
				accountType:[
					{
						required: true,
						message: '请输入开户行',
						trigger: ['change','blur'],
					}
				],
				accountName:[
					{
						required: true,
						message: '请输入开户人名',
						trigger: ['change','blur'],
					}
				],
				cardNumber: [
					{
						required: true,
						message: '请输入卡号',
						trigger: ['change','blur'],
					},
					{
						// 正则不能含有两边的引号
						pattern: /^([1-9]{1})(\d{14}|\d{18})$/,
						message: '银行卡号错误',
						trigger: ['change','blur'],
					}
				],
			},
			errorType: ['message'],
		};
	},
	onLoad() {
		this.$request.post("/member/getMember", {
			dataType: 'json',
			responseType: 'text'
		})
		.then(res => {
			let user = res.data.json;
			if(user.idNumber){
				this.model.idNumber = user.idNumber;
			}
			if(user.bankType){
				this.model.accountType = user.bankType;
			}
			if(user.bankKhr){
				this.model.accountName = user.bankKhr;
			}
			if(user.bankCard){
				this.model.cardNumber = user.bankCard;
			}
		})
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	methods: {
		submit() {
			this.$refs.uForm.validate(valid => {
				if (valid) {
					uni.showLoading({
						title:"正在提交",
						mask:true
					})
					this.$request.post("/member/setBank", {
						data:{
							idNumber:this.model.idNumber,
							bankType:this.model.accountType,
							bankKhr:this.model.accountName,
							bankCard:this.model.cardNumber
						},
						dataType: 'json',
						responseType: 'text'
					})
					.then(res => {
						uni.hideLoading();
						this.$api.msg("提交成功");
					})
					.catch(error => {
						uni.hideLoading();
					});
				}
			});
		},
	}
};
</script>

<style scoped lang="scss">
.wrap {
	padding: 30rpx;
}

.agreement {
	display: flex;
	align-items: center;
	margin: 40rpx 0;

	.agreement-text {
		padding-left: 8rpx;
		color: $u-tips-color;
	}
}
.note{
	font-size: 26rpx;
	padding: 30rpx 0;
	line-height: 50rpx;
}
</style>
